import { useEffect, useState } from 'react'
import { Toast } from 'antd-mobile'
import NavBar from '@/components/NavBar'
import Input from '@/components/Input'
import Textarea from '@/components/Textarea'
import styles from './index.module.scss'

const EditInput = ({ config, onClose, onUpdate }) => {
  const [value, setValue] = useState(config.value || '')

  useEffect(() => {
    if (config.value!==undefined) {
      setValue(config.value)
    }
  }, [config.value])
  //更新昵称
  const updateName = () => {
    const name = value.trim()
    if (name === '') return Toast.info('昵称不能为空')
    onUpdate(name)
  }
  // 更新简介
  // const updateIntro=()=>{
  //   const intro = value.trim()
  //   if(intro==='') return 
  //   onUpdate(intro)
  // }
  return (
    <div className={styles.root}>
      <NavBar
        onClick={onClose}
        className="navbar"
        rightContent={
          <span onClick={updateName} className="commit-btn">
            提交
          </span>
        }
      >
        编辑{config.text}
      </NavBar>

      <div className="edit-input-content">
        <h3>{config.text}</h3>
        {config.text === '昵称' ? (
          <div className="input-wrap">
            <Input value={value} onChange={e=>{setValue(e.target.value)}} placeholder="请输入"/>
          </div>
        ) : (
          <Textarea value={value} onChange={e=>{setValue(e.target.value)}} placeholder="请输入" maxLength={100} />
        )}
      </div>
    </div>
  )
}

export default EditInput
